<template>
  <el-row :gutter="12">
    <el-col :span="5">
      <!--分组-->
      <blogGroup :isDetail="true"/>
    </el-col>
    <el-col :span="18">
      <!--显示博文-->
      <h1>{{blogInfo.title}}</h1>
      ({{dateFormat(blogInfo.addTime).format('YYYY-MM-DD')}})
      <v-md-preview :text="blogInfo.concent"></v-md-preview>
      <hr>
      <!--讨论列表-->
      <discussList :id="id"/>
    </el-col>
  </el-row>
</template>

<script setup>
import { defineProps, reactive } from 'vue'
// 组件
import blogGroup from '../components/blog-group.vue'
import discussList from '../components/discuss-list.vue'
// webSQL
import { webSQLVue } from 'nf-web-storage'
// 数据库
const { help, blog } = webSQLVue.useHelp()

// 日期格式化
const dateFormat = dayjs

// 组件的属性
const props = defineProps({
  id: String
})

// 表单的model
const blogInfo = reactive({})

help.selectOne('blog', props.id).then((data) => {
  // console.log('博文：', data)
  Object.assign(blogInfo, data[0])
})

</script>
